<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../../js/load.js"></script>
    <style>
        body{
            background-color: #f3f3f4;
        }
        .layui-card{
            width: 100% !important;
            margin: 25px !important;
            margin-bottom: 10px !important;
        }

        .layui-input-block{
            line-height: 36px;
        }
        .layui-card-header{
            font-size: 14px;
            font-weight: bold;
        }
        .layui-progress-bar{
            height: 20px !important;
            line-height: 20px !important;
        }
        .layui-progress-big{
            height: 20px !important;
            line-height: 20px !important;
        }
    </style>
</head>

<body>
<div style="width: 100%;height: 100%;">
    <div style="display: flex;flex-direction: row">
        <div class="layui-card">
            <div class="layui-card-header">服务器信息</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">服务器名称</label>
                            <div class="layui-input-block">
                                <spam class="machine-content" id="machineName"></spam>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">服务器IP</label>
                            <div class="layui-input-block">
                                <spam class="machine-content" id="machineIp"></spam>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">操作系统</label>
                            <div class="layui-input-block">
                                <spam class="machine-content" id="osName"></spam>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">系统架构</label>
                            <div class="layui-input-block">
                                <spam class="machine-content" id="osArch"></spam>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex;flex-direction: row">
        <div class="layui-card">
            <div class="layui-card-header">CPU</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">核心数</label>
                            <div class="layui-input-block">
                                <spam class="machine-content" id="cpuNum"></spam>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">利用率</label>
                            <div class="layui-input-block" style="padding-top: 8px">
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="loadRatio">
                                    <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">内存</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">总内存</label>
                            <div class="layui-input-block">
                                <spam class="machine-content" id="totalMemory"></spam>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">利用率</label>
                            <div class="layui-input-block" style="padding-top: 8px">
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="useRatio">
                                    <div class="layui-progress-bar layui-bg-green" lay-percent="0%" ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: flex;flex-direction: row">
        <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <table class="layui-table">
                            <colgroup>
                                <col>
                                <col width="200">
                                <col width="200">
                                <col width="200">
                                <col width="200">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>盘符路径</th>
                                <th>总大小</th>
                                <th>可用大小</th>
                                <th>已用大小</th>
                                <th>已用百分比</th>
                            </tr>
                            </thead>
                            <tbody id="view">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="disk">
    {{#  layui.each(d, function(index, item){ }}
    <tr>
        <td>{{item.dirName}}</td>
        <td>{{item.total}}GB</td>
        <td>{{item.free}}GB</td>
        <td>{{item.used}}GB</td>
        <td>{{item.useRatio}}%</td>
    </tr>
    {{#  }); }}
</script>
<script>
    $(function () {
        layui.use('laytpl', function() {})
        BindData();
        RefreshRatio();
        StartRefresh();
    })

    function BindData() {
        var param = {

        }
        HttpPost(JSON.stringify(param), 'machine/detail', function (result) {
            if (result.code == 0) {
                var base = result.data.base;
                BindBaseInfo(base)
                var disk = result.data.disk;
                BindDiskInfo(disk);
                $("#cpuNum").text(result.data.cpuNum);
                $("#totalMemory").text(result.data.totalMemory+"GB");
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function BindBaseInfo(data) {
        $("#machineName").text(data.machineName)
        $("#machineIp").text(data.machineIp)
        $("#osName").text(data.osName)
        $("#osArch").text(data.osArch)
    }

    function BindDiskInfo(data) {
        var laytpl = layui.laytpl;
        var getTpl = disk.innerHTML
        var view = document.getElementById('view');
        laytpl(getTpl).render(data, function(html){
            view.innerHTML = html;
        });
    }

    function StartRefresh() {
        var timer = setInterval('RefreshRatio()', 2000);
    }

    function RefreshRatio() {
        var param = {

        }
        HttpPost(JSON.stringify(param), 'machine/refresh', function (result) {
            if (result.code == 0) {
                layui.element.progress('loadRatio', result.data.loadRatio+"%");
                layui.element.progress('useRatio', result.data.useRatio+"%");
            }
        })
    }
</script>